<template>
  <div>
    <el-button type="primary" @click="codeErr">js错误</el-button>
    <el-button type="success" @click="asyncError">异步错误</el-button>
    <el-button type="danger" @click="promiseErr">promise错误</el-button>

    <el-button type="info" @click="xhrError">xhr请求报错</el-button>
    <el-button type="warning" @click="fetchError">fetch请求报错</el-button>

    <el-button type="danger" @click="resourceError">加载资源报错</el-button>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
  mounted() {},
  methods: {
    getTableData() {
      this.$emit("getTableData");
    },
    codeErr() {
      this.getTableData();
      let a = undefined;
      if (a.length) {
        console.log("1");
      }
    },

    asyncError() {
      this.getTableData();
      setTimeout(() => {
        JSON.parse("");
      });
    },
    promiseErr() {
      new Promise((resolve) => {
        this.getTableData();
        let person = {};
        person.name.age();
        resolve();
      });
    },
    xhrError() {
      let _this = this;
      let ajax = new XMLHttpRequest();
      ajax.open("GET", "https://abc.com/test/api?abgc='123456'");
      ajax.setRequestHeader("content-type", "application/json");
      console.log(123456);
      ajax.onreadystatechange = function () {
        if (ajax.readyState == 4) {
          _this.getTableData();
        }
        if (ajax.status === 200 || ajax.status === 304) {
          console.log("ajax", ajax);
        }
      };
      ajax.send(66);
      ajax.addEventListener("loadend", () => {});
    },
    fetchError() {
      fetch("https://jsonplaceholder.typicode.com/posts/a", {
        method: "POST",
        header: {
          "Content-Type": "application/json;charset=UTF-8",
        },
        body: { id: 1 },
      })
        .then((res) => {
          if (res.status == 404) {
            this.getTableData();
          }
        })
        .catch(() => {
          this.getTableData();
        });
    },
    resourceError() {
      let script = document.createElement("script");
      script.type = "text/javascript";
      script.src = "https://abc.com/index.js";
      document.body.appendChild(script);
      // 资源加载失败
      script.onerror = () => {
        this.getTableData();
      };
    },
  },
};
</script>

<style lang='scss' scoped>
</style>
